(function($) {

	var bind = function(element) {
		$('li', element).unbind().click(function(e) {
			e.preventDefault();
			if ($(this).hasClass('active')) {
				$(this).removeClass('active');
				$('a.tool[href!=#insert]').addClass('ui-state-disabled');
			} else {
				$('li.active', element).removeClass('active');
				$(this).addClass('active');
				$('a.tool').removeClass('ui-state-disabled');
			}
		});
	};

	var html = function(data) {
		var options = $(this).data();
		var title = data.title ? data.title : data;
		var value = new String(data.value ? data.value : data).replace(/"/mg, '&quot;');
		return title + '<input type="hidden" name="' + options.name + '[]" value="' + value + '" />';
	};

	var methods = {
		
		init: function(options, values) {

			var html = '';
			if (options.ordering) {
				html += '<a href="#movedown" class="tool ui-button ui-corner-all"><span class="ui-icon ui-icon-triangle-1-s"></span></a>';
				html += '<a href="#moveup" class="tool ui-button ui-corner-all"><span class="ui-icon ui-icon-triangle-1-n"></span></a>';
			}
			if (options.oninsert) {
				html += '<a href="#remove" class="tool ui-button ui-corner-all"><span class="ui-icon ui-icon-trash"></span></a>';
				html += '<a href="#insert" class="tool ui-button ui-corner-all"><span class="ui-icon ui-icon-plus"></span></a>';
			}
			if (options.onupdate) {
				html += '<a href="#update" class="tool ui-button ui-corner-all"><span class="ui-icon ui-icon-pencil"></span></a>';
			}
			if (options.label) {
				html += '<label' + (options.required ? ' class="required"' : '') + '>' + options.label +  '</label>';
			}
			html += '<ul></ul>';

			return this.each(function() {
				var element = this;
				
				$(this).html(html);
				$(this).data(options);
				
				$('a.tool[href!=#insert]', this).addClass('ui-state-disabled');
				
				$('a.tool', this).click(function(e) {
					e.preventDefault();
					if (!$(this).hasClass('ui-state-disabled')) {
						var action = $(this).attr('href').substr(1);
						switch (action) {
							case 'insert':
								if (options.oninsert) options.oninsert.call(element);
								break;
							case 'update':
								var data = $('li.active', element).data('value');
								if (options.onupdate) options.onupdate.call(element, data);
								break;
							default:
								$(element).listbox(action);
								break;
						}
					}
				});
			});
		},
		
		destroy: function() {
			return this.each(function() {
				$(this).html('');
			});
		},
		
		insert: function(data, top) {
			var element = document.createElement('li');
			$(element).addClass('active');
			$(element).html(html(data));
			$(element).data('value', data);
			$('li.active', this).removeClass('active');
			$('a.tool').removeClass('ui-state-disabled');
			if (top) {
				$('ul', this).prepend(element);
			} else {
				$('ul', this).append(element);
			}
			bind(this);
		},
		
		update: function(data) {
			$('li.active', this).html(html(data)).data('value', data)
		},
		
		remove: function() {
			var item = $('li.active', this);
			if (item.prev().size()) {
				item.prev().addClass('active');
			} else if (item.next().size()) {
				item.next().addClass('active');
			} else {
				$('a.tool[href!=#insert]').addClass('ui-state-disabled');
			}
			item.remove();
		},
		
		moveup: function() {
			var item = $('li.active', this);
			if (item.prev().size()) {
				item.prev().before(item);
			}
		},
		
		movedown: function() {
			var item = $('li.active', this);
			if (item.next().size()) {
				item.next().after(item);
			}
		}
		
	};

	$.fn.listbox = function(method) {
		if (methods[method]) {
			return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
		} else if (typeof method === 'object' || !method) {
			return methods.init.apply(this, arguments);
		} else {
			$.error( 'Method ' +  method + ' does not exist on jQuery.listbox' );
		}    
	};

})(jQuery);

$(function() {

	var bindHover = function() {
		$('a.tool, :submit, button').hover(
			function() { $(this).addClass('ui-state-hover'); },
			function() { $(this).removeClass('ui-state-hover'); })
		.addClass('ui-button ui-state-default ui-corner-all');
	};

	$("div.loader")
		.bind("ajaxSend", function(){
			$(this).show();
		})
		.bind("ajaxComplete", function(){
			$(this).hide();
			bindHover();
		});

	$('div.dialog').dialog({
		width: '630px',
		autoOpen: false,
		resizable: false,
		moveable: false,
		modal: true,
		zIndex: 1
	});

	$('div.listbox').listbox({
		name: 'listbox',
		label: 'Kapcsolódó tartalmak',
		required: true,
		ordering: true,
		oninsert: function() {
			$(this).listbox('insert', {value: 1, title: 'Árvíztűrő tükörfúrógép'}, true);
		},
		onupdate: function(data) {
			console.log(data);
			$(this).listbox('update', {value: 2, title: 'Árvíztűrő tükörfúrógépek'});
		}
	});
	
	setInterval(function() {
		$.post('admin/index/ping', { time: new Date().getTime() });
	}, 300000);

	bindHover();

});
